<template>
	<div class="header">
		<div class="once">
			曾经工作过的公司
		</div>
		<div class="x_tab">
			<div class="nav navigation">  
      			<mt-button  size="small" @click.native.prevent="active = 'tab-container1'">{{fristCompany.company}}</mt-button> 
      			<mt-button  size="small" @click.native.prevent="active = 'tab-container2'">{{secondCompany.company}}</mt-button>
   			</div>  
	   		<div class="page-tab-container">  
	      		<mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>  
	        		<mt-tab-container-item id="tab-container1" class="contentCompany">  
		           		<div class="fixclear"><span class="fl lc">公司：</span><span class="fr rc">{{fristCompany.company}}</span></div>
		           		<div class="fixclear"><span class="fl lc">职位：</span><span class="fr rc">{{fristCompany.position}}</span></div>
		           		<div class="fixclear"><span class="fl lc">工作时间:</span ><span class="fr rc">{{fristCompany.date}}</span></div>
		           		<div class="fixclear">
			           		<div>职责：</div>
			           		<div>
								<p>{{fristCompany.responsibility.one}}</p>
								<p>{{fristCompany.responsibility.two}}</p>
								<p>{{fristCompany.responsibility.three}}</p>
			           		</div>
		           		</div>
	       			</mt-tab-container-item>  
	        		<mt-tab-container-item id="tab-container2" class="contentCompany">  
		          		<div class="fixclear"><span class="fl lc">公司：</span><span class="fr rc">{{secondCompany.company}}</span></div>
		           		<div class="fixclear"><span class="fl lc">职位：</span><span class="fr rc">{{secondCompany.position}}</span></div>
		           		<div class="fixclear"><span class="fl lc">工作时间:</span ><span class="fr rc">{{secondCompany.date}}</span></div>
		           		<div class="fixclear">
			           		<div>职责：</div>
			           		<div>
								<p>{{secondCompany.responsibility.one}}</p>
								<p>{{secondCompany.responsibility.two}}</p>
								<p>{{secondCompany.responsibility.three}}</p>
								<p>{{secondCompany.responsibility.four}}</p>
			           		</div>
		           		</div> 
        			</mt-tab-container-item>  
     	 		</mt-tab-container>  
   			 </div>  
		</div>
		<div class="education">
			<div class="once">曾经上过的学</div>
			<div v-for="item in school">
				<el-collapse accordion>
				  <el-collapse-item>
				    <template slot="title">
				      	{{item.name}}		<i class="header-icon el-icon-info"></i>
				    </template>
				    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
				    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
				  </el-collapse-item>
				</el-collapse>
			</div>
		</div>
	</div>
</template>

<script>

	export default{
		name: 'page-tab-container', 
		data(){
			return{
				activeName: '1',
				active: 'tab-container1',
				fristCompany:null,
				secondCompany:null,
				school:null
			}
		},

		created(){
			this.fristCompany=this.$store.state.record.frist,
			this.secondCompany=this.$store.state.record.second,
			this.school=this.$store.state.school
		}
	}
</script>
<style scoped>
	
 .header{
 	margin: 50px 0;
 }
.once{
	font-size: 30px;
	color: deeppink;
	letter-spacing: 5px;
	text-align: center;
	margin-bottom: 1em;
}

.x_tab{
	margin-top: .8em;
}
.navigation{
	width: 80%;
	margin:0 auto;
	text-align: center;
}
.navigation .mint-button{
	margin-right: 50px;
}

.contentCompany{
	padding: 20px 60px;
	font-size: 16px;
	color: #1f1e7a;
}
.contentCompany>div{
	padding: 10px 0;
}
.contentCompany>div:last-child{
	padding-top: 20px;
}
.contentCompany>div:last-child p{
	padding: 0.5em;
	font-size: 16px;
	color: #1f1e7a;
	text-indent: 2em;
}
.rc{
	width: 13em;
	text-align: left;
}
.item {  
    display: inline-block;  
  }  
  
  .nav {  
    padding: 10px;  
  }  
  
  .link {  
    color: inherit;  
    padding: 20px;  
    display: block;  
  }  
</style>